
import { Toast } from 'vant'
export default {
  data() {
    return {
      websock: null,
      webSocketError: false,
      websockUrl: "wss://api.sumaokeji.com/sumao/api/forum/websocket/",
      timeoutObj: undefined,
      serverTimeoutObj: undefined,
      lockReconnect: false // 为true时，是心跳重连的websocket断开连接
    }
  },
  created() {
    var mid = this.getQueryName("type");
    this.websockUrl = this.websockUrl + mid;

    this.initWebSocket() // 进入页面开始初始化websocket建立连接
    //绑定事件
    window.addEventListener('beforeunload', e => this.closeWebsocket(e))
  },
  destroyed() {
    this.lockReconnect = false
    // 组件销毁时，关闭与服务器的连接
    // window.clearInterval(window.websockTimer)
    this.websock && this.websock.close() // 离开页面断开连接
    // 2、通过关闭计时器和倒计时关闭心跳监测
    clearInterval(this.timeoutObj)
    clearTimeout(this.serverTimeoutObj);

  },
  mounted() {
    // 在当前页面添加popstate监听事件，popState不支持的时候调pageshow和pagehide
    // if (this.supportsPopState()) {
    //   window.addEventListener('popstate', () => {
    //     // window.clearInterval(window.websockTimer)
    //     this.initWebSocket()
    //     // 你想做的刷新事件，一般会重新调用数据接口什么的
    //     // 注意最好不要在这里调reload，因为有时候一进页面就会调popstate事件，最好只是重新调一下接口
    //   })
    // } else {
    //   // 不支持就监听pageshow事件，再不行就没办法了
    //   let isPageHide = false // 用isPageHide标识是否离开过

    //   window.addEventListener('pageshow', () => {
    //     if (isPageHide) {
    //       // window.clearInterval(window.websockTimer)
    //       this.initWebSocket()
    //       // 你想做的刷新事件，一般会重新调用数据接口什么的
    //       // 需要重新将isPageHide标识重置为false
    //       isPageHide = false
    //     }
    //   })
    //   window.addEventListener('pagehide', () => {
    //     isPageHide = true
    //   })
    // }
  },
  methods: {
    /**
   * 判断是否支持popstate事件
   */
    supportsPopState() {
      const ua = window.navigator.userAgent

      if (
        (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
        ua.indexOf('Mobile Safari') !== -1 &&
        ua.indexOf('Chrome') === -1 &&
        ua.indexOf('Windows Phone') === -1
      ) {
        return false
      }

      return window.history && 'pushState' in window.history
    },
    initWebSocket() {
      if (typeof WebSocket === 'undefined') {
        Toast({
          type: 'fail',
          message: '不支持 websocket'
        })
      }
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      this.websock = new WebSocket(this.websockUrl) // 这里是websocket服务地址，这里的地址可以前端根据后台地址参数规则拼成，也可以向后端请求
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onmessage = this.websocketonmessage // 父组件定义
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      console.log('WebSocket连接成功')
      this.longstart();   // 成功建立连接后，创建心跳检测
      // 连接成功执行的逻辑
      // window.websockTimer = setInterval(() => {
      //   this.websock.send('发送点什么')
      // }, 30000)
    },
    websocketonerror(e) {
      this.webSocketError = true
      console.log(e)
      console.log('WebSocket连接发生错误')
    },
    websocketclose(e) {
      // window.clearInterval(window.websockTimer)
      // this.initWebSocket()
      if (this.lockReconnect) {
        this.initWebSocket()
      } else {
      }
      console.log('connection closed (' + e.code + ')')
    },
    beforeDestroy() {
      //卸载事件
      window.removeEventListener('beforeunload', e => this.closeWebsocket(e))
    },
    longstart() {
      clearInterval(this.timeoutObj)
      clearTimeout(this.serverTimeoutObj);
      // clearInterval(this.overTime)
      this.timeoutObj = setInterval(() => {
        // console.log('重置监测心跳')
        let data = {
          chatType: "hert",
          content: "pong",
          contentType: "hert"
        }
        this.websock.send(JSON.stringify(data))
        this.serverTimeoutObj = setTimeout(() => {
          this.lockReconnect = true // 心跳重连设置为true
          // console.log("后台挂掉，没有心跳了....");
          // console.log("打印websocket的地址:" + this.socket);
          this.websock.close();
          // createWebSocket();
        }, 5000);
      }, 50000)
    }
  }
}
